<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover" class="mgb20" style="height: 250px">
          <div class="user-info">
            <img src="../../assets/icon_Defalt.png" class="user-avator" alt />
            <div class="user-info-cont">
              <div class="user-info-name">{{ username }}</div>
              <div>管理员</div>
            </div>
          </div>
          <div class="user-info-list">
            <el-row type="flex" justify="center">{{ this.str }}</el-row>
          </div>
        </el-card>
        <el-card>
          <el-row type="flex" justify="center">M B T I 数据管理平台介绍</el-row>
          <br />
          <el-row type="flex" justify="center">1.
            作为管理员，可以对本校的学院\专业\班级\学生进行信息编辑工作</el-row>
          <el-row type="flex" justify="center">2.
            作为管理员，可以对本系统的题目\全部测试结果进行信息编辑工作</el-row>
          <el-row type="flex" justify="center">3. 作为管理员，可以使用“数据可视化”功能更直观的查看测试数据</el-row>
          <hr />
          <el-row type="flex" justify="center">M B T I 数据管理功能简介</el-row>
          <br />
          <el-row type="flex" justify="center">1. 我们为您提供模糊查询功能，让您更方便的管理。</el-row>
          <el-row type="flex" justify="center">2. 我们为您提供多级管理功能，让您更灵活的管理。</el-row>
          <el-row type="flex" justify="center">3. 我们为您提供数据可视功能，让您更直观的管理。</el-row>
          <hr />
          <el-row type="flex" justify="center">关 于</el-row>
          <br />
          <el-row type="flex" justify="center">后端搭建 Defalt</el-row>
          <el-row type="flex" justify="center">前端搭建 Defalt</el-row>
          <el-row type="flex" justify="center">QQ: 844191153 | Phone & WeChat: 15848566846</el-row>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-row :gutter="20" class="mgb20">
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <div class="grid-cont-right">
                  <div class="grid-num">{{ visit }}</div>
                  <div>用户访问量</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-2">
                <div class="grid-cont-right">
                  <div class="grid-num">{{ stuNum }}</div>
                  <div>学生数量</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-3">
                <div class="grid-cont-right">
                  <div class="grid-num">{{ topicNum }}</div>
                  <div>题目数量</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-card shadow="always">
          <el-row type="flex" justify="center"><img src="../../assets/bg.png" /></el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: window.sessionStorage.getItem("Name"),
      visit: 0,
      stuNum: 0,
      topicNum: 0,
      date: new Date(),
      str: "",
    };
  },
  mounted() {
    this.setWelcome();
    this.setNum();
  },
  methods: {
    setWelcome() {
      if (this.date.getHours() >= 6 && this.date.getHours() < 12) {
        this.str = "阳光明媚，效率翻倍！";
      } else if (this.date.getHours() >= 12 && this.date.getHours() < 18) {
        this.str = "微风不燥，工作高效！";
      } else {
        this.str = "加油，深夜仍然努力的你！";
      }
    },
    async setNum() {
      const { data: res } = await this.$http.post("api/query/result", {
        Sno: "",
        Pno: "",
      });
      this.visit = res.Data["ret"].length;
      const { data: ret } = await this.$http.post("api/query/studentAll");
      this.stuNum = ret.Data["ret"].length;
      const { data: ans } = await this.$http.post("api/query/questionAll");
      this.topicNum = ans.Data["ret"].length;
    },
  },
};
</script>

<style scoped>
.el-row {
  margin-bottom: 2%;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-num {
  color: rgb(10, 216, 13);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list {
  font-size: 20px;
  color: #999;
  line-height: 25px;
}

.mgb20 {
  margin-bottom: 20px;
}

.el-card {
  size: auto;
}
</style>
